<template>
  <div class="demo">
    <div class="demo-title">复杂的动态增减表单项</div>
    <div class="demo-content">
      <Form
        ref="formRef"
        name="dynamic_form_nest_item"
        :model="dynamicValidateForm"
        @finish="onFinish"
      >
        <Form.Item name="area" label="Area" :rules="[{ required: true, message: 'Missing area' }]">
          <Select v-model:value="dynamicValidateForm.area" :options="areas" />
        </Form.Item>
        <Space
          v-for="(sight, index) in dynamicValidateForm.sights"
          :key="sight.id"
          style="display: flex; margin-bottom: 8px"
          align="baseline"
        >
          <Form.Item
            :name="['sights', index, 'value']"
            label="Sight"
            :rules="{ required: true, message: 'Missing sight' }"
          >
            <Select
              v-model:value="sight.value"
              :disabled="!dynamicValidateForm.area"
              :options="(sights[dynamicValidateForm.area as string] || []).map((a) => ({ value: a }))"
              style="width: 130px"
            />
          </Form.Item>
          <Form.Item
            label="Price"
            :name="['sights', index, 'price']"
            :rules="{ required: true, message: 'Missing price' }"
          >
            <Input v-model:value="sight.price" />
          </Form.Item>
          <MinusCircleOutlined @click="removeSight(sight)" />
        </Space>
        <Form.Item>
          <Button type="dashed" block @click="addSight">
            <PlusOutlined />
            Add sights
          </Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Select from '@sscd/select';
  import Space from '@sscd/space';
  import Form from '@sscd/form';
  import type { FormInstance } from '@sscd/form';
  interface Sights {
    value: string | undefined;
    price: string | undefined;
    id: number;
  }
  const areas = [
    { label: 'Beijing', value: 'Beijing' },
    { label: 'Shanghai', value: 'Shanghai' },
  ];
  const sights = {
    Beijing: ['Tiananmen', 'Great Wall'],
    Shanghai: ['Oriental Pearl', 'The Bund'],
  };
  const formRef = ref<FormInstance>();
  const dynamicValidateForm = reactive<{ sights: Sights[]; area: string | undefined }>({
    sights: [],
    area: undefined,
  });
  watch(
    () => dynamicValidateForm.area,
    () => {
      dynamicValidateForm.sights = [];
    }
  );
  const removeSight = (item: Sights) => {
    const index = dynamicValidateForm.sights.indexOf(item);
    if (index !== -1) {
      dynamicValidateForm.sights.splice(index, 1);
    }
  };
  const addSight = () => {
    dynamicValidateForm.sights.push({
      value: undefined,
      price: undefined,
      id: Date.now(),
    });
  };
  const onFinish = (values) => {
    console.log('Received values of form:', values);
    console.log('dynamicValidateForm:', dynamicValidateForm);
  };
</script>
